@import "compass";

.blurry{
	@include filter( blur(0.1em) );
}

.mobile_blocked{
	@media #{$phone}{
		display: inline;
		td{
			display: block;
		}
	}
}

.space_mobile{
	@media #{$phone}{
		background: var(--sakai-background-color-2);
		border-top:    1px solid var(--sakai-border-color);
		border-bottom: 1px solid var(--sakai-border-color);
		margin: 0.5em -1.02em;
		padding: 1em 0.95em;
		box-shadow: inset 0px 0px 7px 0px rgba(0,0,0,0.25);
	}
}

@mixin bs-callout($color, $bgcolor, $bordercolor) {
  display: block;
  margin: 20px 0;
  padding: 15px 30px 15px 15px;
  border: 1px solid;
  border-left-width: 5px;
  border-color: $bordercolor;
  color: $color;
  background-color: $bgcolor;
  h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	color: $color;
  }
  p:last-child {
	margin-bottom: 0;
  }
  code, .highlight {
	background-color: var(--sakai-color-white);
  }
}

.bs-callout-primary, .bs-callout-info, .messageInformation, .messageInstruction, .messageProgress {
  @include bs-callout(var(--infoBanner-color), var(--infoBanner-bgcolor), var(--infoBanner-bordercolor));
}

.bs-callout-success, .messageValidation, .messageSuccess {
  @include bs-callout(var(--successBanner-color), var(--successBanner-bgcolor), var(--successBanner-bordercolor));
}
.bs-callout-warn, .bs-callout-alert, .messageWarning, .messageConfirmation {
  @include bs-callout(var(--warnBanner-color), var(--warnBanner-bgcolor), var(--warnBanner-bordercolor));
}
.bs-callout-danger, .bs-callout-error, .messageError {
  @include bs-callout(var(--errorBanner-color), var(--errorBanner-bgcolor), var(--errorBanner-bordercolor));
}

@mixin sakai-banner($bordercolor, $bgcolor, $color, $icon, $isInline: false) {
	position: relative;
	@if $isInline {
		display: inline-block;
		margin: 0;
		padding: 0 $standard-space 0 calc(#{$standard-spacing} * 2 + 18px); // making room on either side of the icon plus the width of the icon;
	} @else {
		display: block;
		clear: both;
		margin: $standard-spacing 0;
		padding: $standard-spacing $standard-spacing $standard-spacing calc(#{$standard-spacing} * 2 + 18px); // making room on either side of the icon plus the width of the icon;
	}
	border-left: calc( #{$standard-spacing} / 2) solid $bordercolor;
	background-color: $bgcolor;
	color: $color;
	
	// display an icon indicating banner type on the left of the text
	&:before {
		content: '';
		@extend .fa;
		@extend .fa-fw;		// fixed width icons
		@extend #{$icon};	// icon passed in through mixin's parameter
		position: absolute;
		top: calc(50% - 7px); 	// half the height of the icon
		left: $standard-spacing;
		margin-right: $standard-space;	// space between icon and message text
		color: $color;
	}
	
	// display a closing X on the right of the banner to indicate that the banner is dismissible
	.dismiss {
		@if $isInline == false {
			position: absolute;
			top: calc(50% - 10px);			// vertically-align the icon with half its height
			right: $standard-spacing;		// space between icon and right edge of banner
		} @else {
			margin-left: $standard-space;	// space between icon and end of message text
		}
		text-decoration: none;
		
		span {
			font-size: 0;		// hide the accessible text
		}
		
		&:before {
			content: '';
			@extend .fa;
			@extend .fa-fw;	// fixed width icons
			@extend .fa-close;
		}
	}
	
	// any links in the banners should have the same text color contrast and be underlined
	a[href] {
		color: $color;
		text-decoration: underline;
	}

	// remove end spacing from any paragraphs at the end of the banner
	p:last-child {
		margin-bottom: 0;
	}
}
@mixin sakai-banner-meetings($bordercolor, $bgcolor, $color, $icon, $isInline: false) {
	position: relative;
	@if $isInline {
		display: inline-block;
		margin: 0;
		padding: 0 $standard-space 0 calc(#{$standard-spacing} * 2 + 18px); // making room on either side of the icon plus the width of the icon;
	} @else {
		display: block;
		clear: both;
		margin: $standard-spacing 0;
		padding: $standard-spacing $standard-spacing $standard-spacing calc(#{$standard-spacing} * 2 + 18px); // making room on either side of the icon plus the width of the icon;
	}
	border-left: calc( #{$standard-spacing} / 2) solid $bordercolor;
	background-color: $bgcolor;
	color: $color;

	// display an icon indicating banner type on the left of the text
	&:before {
		content: '';
		@extend .fa;
		@extend .fa-fw;		// fixed width icons
		@extend #{$icon};	// icon passed in through mixin's parameter
		top: calc(50% - 7px); 	// half the height of the icon
		left: $standard-spacing;
		margin-right: $standard-space;	// space between icon and message text
		color: $color;
	}

	// display a closing X on the right of the banner to indicate that the banner is dismissible
	.dismiss {
		@if $isInline == false {
			position: absolute;
			top: calc(50% - 10px);			// vertically-align the icon with half its height
			right: $standard-spacing;		// space between icon and right edge of banner
		} @else {
			margin-left: $standard-space;	// space between icon and end of message text
		}
		text-decoration: none;

		span {
			font-size: 0;		// hide the accessible text
		}

		&:before {
			content: '';
			@extend .fa;
			@extend .fa-fw;	// fixed width icons
			@extend .fa-close;
		}
	}

	// any links in the banners should have the same text color contrast and be underlined
	a[href] {
		color: $color;
		text-decoration: underline;
	}

	// remove end spacing from any paragraphs at the end of the banner
	p:last-child {
		margin-bottom: 0;
	}
}

.sak-banner-info {
	@include sakai-banner(var(--infoBanner-bordercolor), var(--infoBanner-bgcolor), var(--infoBanner-color), $infoBanner-icon, false);
}
.sak-banner-info-meetings {
	@include sakai-banner-meetings(var(--infoBanner-bordercolor), var(--infoBanner-bgcolor), var(--infoBanner-color), $infoBanner-icon, false);
}
.sak-banner-info-inline {
	@include sakai-banner(var(--infoBanner-bordercolor), var(--infoBanner-bgcolor), var(--infoBanner-color), $infoBanner-icon, true);
}
.sak-banner-success {
	@include sakai-banner(var(--successBanner-bordercolor), var(--successBanner-bgcolor), var(--successBanner-color), $successBanner-icon, false);
}
.sak-banner-success-inline {
	@include sakai-banner(var(--successBanner-bordercolor), var(--successBanner-bgcolor), var(--successBanner-color), $successBanner-icon, true);
}
.sak-banner-warn {
	@include sakai-banner(var(--warnBanner-bordercolor), var(--warnBanner-bgcolor), var(--warnBanner-color), $warnBanner-icon, false);
}
.sak-banner-red-warn {
	@include sakai-banner(var(--errorBanner-bordercolor), var(--errorBanner-bgcolor), var(--errorBanner-color), $warnBanner-icon, false);
}
.sak-banner-warn-inline {
	@include sakai-banner(var(--warnBanner-bordercolor), var(--warnBanner-bgcolor), var(--warnBanner-color), $warnBanner-icon, true);
}
.sak-banner-error {
	@include sakai-banner(var(--errorBanner-bordercolor), var(--errorBanner-bgcolor), var(--errorBanner-color), $errorBanner-icon, false);
}
.sak-banner-error-inline {
	@include sakai-banner(var(--errorBanner-bordercolor), var(--errorBanner-bgcolor), var(--errorBanner-color), $errorBanner-icon, true);
}
.sak-banner-dismiss {
	padding-right: calc(#{$standard-spacing} + 1.2em + #{$standard-spacing});		// allow enough room for dismiss "X"
}

@mixin icon( $width : $icon-size, $height : $icon-size ){
	border: 0px none;
	display: inline-block;
	height:  $height;
	width:   $width;
	&:hover{
		opacity: 0.5;
	}
}

@mixin toolicon( $width : $icon-size, $height : $icon-size ){
	
	@if $skin-with-icons {
		border:  0px none;
		display: inline-block;
		height:  $height;
		width:   $width;
		margin:  0 0.25em 0.15em 0;
	}
}

input::placeholder {
	color: var(--sakai-text-color-1);
}

.select{
	background-color: var(--sakai-background-color-1);
	background-image: var(--select-background-image-url, url(#{$skin-path}images/icon-arrow-down.png));
	background-position: right 50%;
	background-repeat: no-repeat;
	color: var(--sakai-text-color-1);
	font-family: $font-family;
	font-size: #{$default-font-size - 1};
	padding: 0.3em 2.2em 0.3em 0.5em;
	text-align: left;
	max-width: 100%;
	@include appearance(none);
	@include border-radius(3px);
	border: 1px solid var(--sakai-border-color);
	&::-ms-expand {
		display: none;
	}
	
	&[multiple], &[size]:not([size='1']) {
		background-image: none;
	}
	
	&:focus {
		box-shadow: 0px 0px $focus-outline-width $focus-outline-width var(--focus-outline-color);
	}
	
	&[disabled="disabled"],&[disabled],&[disabled="true"] {
		opacity: 0.7;
		background-color: var(--sakai-background-color-1);
		color: var(--sakai-text-color-disabled);
		cursor: not-allowed;
	}

}

.nav.nav-tabs, .sakai_tabs{
	margin: 0; /* Reset margin */
	> li{
	    margin: 0 0.4em 0 $standard-space;
		&.active, &.selected, &.activeTab{
	        position: relative;
			> a{
				background: var(--tool-tab-active-background-color);
				border-top: 1px solid var(--sakai-border-color);
				border-left: 1px solid var(--sakai-border-color);
				border-right: 1px solid var(--sakai-border-color);
				border-bottom: 1px solid var(--tool-tab-active-background-color);
				color: var(--tool-tab-active-color);
				&:before {
					border-top: 4px solid var(--tool-tab-active-highlight-color);
					border-radius: 4px 4px 0 0 ;
					content: "";
					display: block;
					position: absolute;
					left: -1px;
					right: -1px;
					top: -10px;
				}
				&:after{
					border-bottom: 1px solid var(--tool-tab-active-background-color);
					content: '';
					display: block;
					position: absolute;
					left: 0;
					right: 0;
					bottom: -1px;
				}
				&:hover{
					background: var(--tool-tab-active-background-color);
					color: var(--tool-tab-active-color);
				}
			}
		}
		> a{
			background: var(--tool-tab-background-color);
			border: 1px solid var(--sakai-border-color);
			color: var(--sakai-text-color-1);
			cursor: pointer;
			text-decoration: none;
		}
	}
}

@mixin sakai_button($sb-text-color,
					$sb-background,
					$sb-border-color,
					$sb-hover-text-color,
					$sb-hover-background,
					$sb-hover-border-color,
					$sb-active-text-color,
					$sb-active-background,
					$sb-active-border-color,
					$sb-text-transform,
					$sb-font-weight,
					$sb-shadow,
					$sb-hover-shadow,
					$sb-active-shadow) {
	display: inline-block;
	margin: 0;
	padding: 7px $standard-spacing;
	border: 1px solid $sb-border-color;
	@include border-radius($button-radius);
	background: $sb-background;
	font-family: $font-family;
	font-size: 1em;
	font-weight: $sb-font-weight;
	line-height: 18px;
	color: $sb-text-color;
	text-decoration: none;
	text-transform: $sb-text-transform;
	cursor: pointer;
	@include appearance(none);
	box-shadow: $sb-shadow;

	&:before { // icon
		color: $sb-text-color;
	}

	&:hover, &:focus {
		color: $sb-hover-text-color;
		text-decoration: none;
		background: $sb-hover-background;
		border-color: $sb-hover-border-color;
		box-shadow: $sb-hover-shadow;
		&:before { // icon
			color: $sb-hover-text-color;
		}
	}

	&:focus {
		outline:none;
		box-shadow: $sakai-box-shadow-emulate-focus var(--focus-outline-color);
	}

	&:active {
		outline: 0;		// no focus outline on click
		color: $sb-active-text-color;
		text-decoration: none;
		background: $sb-active-background;
		border-color: $sb-active-border-color;
		box-shadow: $sb-active-shadow;
		
		&:before { // icon
			color: $sb-active-text-color;
		}
	}

	&[disabled="disabled"], &[disabled], &[disabled="true"], &.disabled {
		&, &:hover, &:active, &:focus {
			color: var(--button-disabled-text-color);
			text-decoration: none;
			background: var(--button-disabled-background);
			border:1px solid;
			border-color: var(--button-disabled-border-color);
			box-shadow: var(--button-disabled-shadow);
			cursor: not-allowed;
		}
	}
}

// the primary button is the primary action task at hand (as opposed to secondary actions that are less utilized)
@mixin sakai_primary_button() {
	margin-right: $standard-space;
	@include sakai_button(	var(--button-primary-text-color),
							var(--button-primary-background),
							var(--button-primary-border-color),
							var(--button-primary-hover-text-color),
							var(--button-primary-hover-background),
							var(--button-primary-hover-border-color),
							var(--button-primary-active-text-color),
							var(--button-primary-active-background),
							var(--button-primary-active-border-color),
							$button-primary-text-transform,
							$button-primary-font-weight,
							var(--button-primary-shadow),
							var(--button-primary-hover-shadow),
							var(--button-primary-active-shadow));
}

// the standard button design for non-primary action buttons (opposite of sakai_primary_button above)
@mixin sakai_secondary_button() {
	margin-right: $standard-space;
	@include sakai_button(	var(--button-text-color),
							var(--button-background),
							var(--button-border-color),
							var(--button-hover-text-color),
							var(--button-hover-background),
							var(--button-hover-border-color),
							var(--button-active-text-color),
							var(--button-active-background),
							var(--button-active-border-color),
							$button-text-transform,
							$button-font-weight,
							var(--button-shadow),
							var(--button-hover-shadow),
							var(--button-active-shadow));
}

button.btn-primary, .act .active, .#{$namespace}html .ui-priority-primary, .#{$namespace}html .ui-widget-content .ui-priority-primary, .#{$namespace}html .ui-widget-header .ui-priority-primary {
	@include sakai_primary_button();
}

//TODO Trinity
.button_color,
.button, a[href].button,
//.btn-group .btn,
//.btn.btn-default,
.button.link,
a.btn-link,
button.ui-state-default, 
//button:not(.fc-button), 
//button:not(.fc-button):not(.btn):not(.btn-close), 
button.btn-link,
.#{$namespace}html .ui-priority-secondary,
.#{$namespace}html .ui-widget-content .ui-priority-secondary,
.#{$namespace}html .ui-widget-header .ui-priority-secondary {
	@include sakai_secondary_button();
}

button.btn-transparent {
	background-color: transparent;
	border: none;
	padding: 0;
	margin: 0;

	&:hover, &:focus {
		color: var(--sakai-text-color);
		background: var(--sakai-background-color);
	}

	&:focus:not(:focus-visible) { // adds outline only when using tab key to focus #a11y
		box-shadow: none;
	}

	&:disabled, &.disabled {
		&, &:hover, &:active, &:focus {
			color: var(--button-disabled-text-color);
			background: var(--sakai-background-color);
			border: none;
			cursor: not-allowed;
		}
	}

	&.link-color {
		color: var(--link-color);

		&:hover, &:focus {
			color: var(--link-hover-color);
		}
	}

}

button.btn-tab {
	background-color: transparent;

	&:hover, &:focus {
		background-color: var(--tool-menu-hover-background-color);
	}

	&.selected {
		background-color: var(--tool-menu-item-selected-background-color);
		font-weight: 600;
	}
}

.input-group-btn .btn {
  margin: 0 0 0 -1px;
}

a.noPointers, input.noPointers {
	pointer-events: none;
}

.act {
	@include display-flex;
	@include flex-wrap(wrap);
	@include align-items(center);
	margin: $standard-spacing 0;
	
	> input,
	> button,
	> a,
	> a[href],
	> .active {
		margin-right: $standard-space;		
		&:last-child {
			margin-right: 0;
		}
	}
}

/*** Begin button spinner overlay ***/
@-moz-keyframes rotate {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}

@keyframes rotate {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

.spinButton, .spinSelect {
	position: relative;
}

.spinButton:after, .spinPlaceholder:after, .spinSelect:after {
	content: "";
	background: url(#{$skin-path}images/ring58.png) center center no-repeat;
	-moz-animation-name: rotate;
	-moz-animation-duration: 1.6s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 1.6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: rotate;
	animation-duration: 1.6s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	display: inline;
	vertical-align: middle;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.spinSelect:after {
	left: initial;
	right: 4px;
	width: 16px;
}

.spinPlaceholder, .allocatedSpinPlaceholder {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 5px;
}

.spinnerBesideContainer {
	@include display-flex;
	@include align-items( center );
	label {
		margin: 0 4px 0 0;
	}
	select {
		margin-bottom: 0px;
	}
}

/*** End button spinner overlay ***/
.ui-dialog.ui-widget {
	@media #{$phone}{
		width: 95% !important;
		left: 2.5% !important;
	}
}

.ui-dialog .ui-dialog-buttonpane button{
	@include sakai_primary_button();
}

label.panelGridLabel{
	margin-right: 0.5em;
}

.inputColorContainer{
	input{
		@media #{$phone}{
			display: inline-block;
			max-width: calc( 100% - 20px);
		}
	}
	td{
		vertical-align: baseline;
	}
}

/*** Drop files bar for Resources & Dropbox ***/
.dropzone {
	overflow: visible;
	border: 2px dashed var(--tool-menu-color) !important;
	border-radius: 5px;
	background-color: var(--tool-menu-background-color) !important;
	&:hover {
		filter:brightness(.85);
	}
	
	.dz-progress{
		top: 70% !important;
	}
}

.dropzone .dz-message .note {
	font-size: 0.8em;
	font-weight: 200;
	display: block;
	margin-top: 1.4rem;
}

.dropzone .dz-preview.dz-image-preview {
	background-color: var(--sakai-background-color-1) !important;
}

.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
	background-color: var(--sakai-background-color-1);
}

div.wicket-modal div.w_blue a.w_close {
	background-image: none;
	right: 16px;
	font-size: 1.5em;
	overflow: visible;
	color: var(--sakai-modal-header-color-1);

	&::before {
		@extend .fa;
		@extend .fa-times;
	}
}

.text-default,
.bg-default {
	color: var(--sakai-text-color-1);
	background-color: var(--sakai-background-color-1);
}
.text-primary {
	color: var(--sakai-brand) !important;
}
.bg-primary {
	color: var(--sakai-text-color-inverted);
	background-color: var(--sakai-brand) !important;
}
.badge{
	color: var(--sakai-text-color-inverted);
}
.text-success,
.bg-success {
	color: var(--successBanner-color);
	background-color: var(--successBanner-bgcolor) !important;
}
.text-info,
.bg-info {
	color: var(--infoBanner-color);
	background-color: var(--infoBanner-bgcolor) !important;
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
}
.text-warning,
.bg-warning {
	color: var(--warnBanner-color);
	background-color: var(--warnBanner-bgcolor) !important;
}
.text-danger,
.bg-danger {
	color: var(--errorBanner-color);
	background-color: var(--errorBanner-bgcolor) !important;
}

.close {
	opacity: 1;
}

.grab_cursor {
	cursor: grab;
}

.grabbing_cursor {
	cursor: grabbing;
} 

.itemSummaryHeader.itemSummaryWrap {
	white-space: normal;
}
